import utils from '../../../utils/utils'

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: { // 是否显示商品规格选择弹框
      type: Boolean,
      value: false,
      observer: function (newVal) {
        if (newVal) {
          this.setData({
            skuLevel: {},
            skuGoodsInfo: {},
            skuGoodsStepperNum: 1
          })
        }
      }
    },
    goodsInfo: { // 商品信息
      type: Object,
      value: {}
    }, 
    skuList: { // 商品规格列表
      type: Array,
      value: []
    },
    skuInfo: { // 商品规格信息
      type: Object,
      value: []
    },
    type: { // 后续操作类型
      type: Number,
      value: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    skuGoodsInfo: {}, // 规格商品信息
    skuGoodsStepperNum: 1, // 规格商品选择步进器数量
    skuLevel: {} // 规格层级
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 关闭弹窗
    onClosePopup () {
      this.triggerEvent('close')
    },
    // 购买数量
    onChangeStepper (event) {
      this.setData({skuGoodsStepperNum: event.detail})
    },
    // 规格选择
    onSelectSku (event) {
      // attrid: 规格id  
      // status：是否可以点击 - true:可以点击 false:不能点击
      // level：层级（从 0 开始，0 为最高层级）
      // >>> 层级设定：根据 wx:for 渲染 skuList 中的 index 进行设定
      // >>> 说明：目前只支持规格上到下依次选择，需要设置层级进行限制）
      // >>> 作用：限制选择规格选择顺序（必须从上至下）；通过对应层级存储的规格属性id（attrid），获取对应规格信息
      let { attrid, status, level } = event.currentTarget.dataset
      let { goodsInfo, skuList, skuInfo } = this.properties
      let { skuLevel } = this.data
      let parentLevel = level > 0 ? level - 1 : level // 获取上一个层级
      if (!status || (skuLevel[level] && skuLevel[level] === attrid)) return
      if (level === 0 || skuLevel[parentLevel]) {
        // 如果当前层级为第一个层级 或者 当前层级的上一个层级存在，则设置添加或修改层级
        skuLevel[level] = attrid
        let skuChildList = skuList[level].childList.filter(item => item.childAttrId === attrid)
        if (skuList[level + 1]) {
          skuList[level + 1] = skuChildList[0].childList
        }
        for (let i in skuLevel) {
          if (parseInt(i) > level) {
            delete skuLevel[i]
          }
        }
        this.setData({
          skuLevel: skuLevel,
          skuList: skuList
        })
      } else {
        utils.msg('请依次选择规格')
      }
      if (skuLevel[parentLevel] && level === skuList.length - 1) {
        // 当前选择层级的上一个层级存在 并且 层级为最后一个层级，则设置所选择的多规格商品信息
        let skuAttrKey = skuLevel[skuList.length - 1] // 规格属性id
        let skuGoodsInfo = skuInfo[skuAttrKey] // 获取对应规格商品的信息
        let goodsInfoObj = {
          goodsImg: skuGoodsInfo.sku_img || goodsInfo.goodsThumbnailImg, // 商品图片
          goodsUnit: skuGoodsInfo.sku_unit, // 商品单位
          goodsPrice: skuGoodsInfo.goods_price, // 商品价格
          goodsMemberPrice: skuGoodsInfo.member_goods_price, // 商品会员价格
          goodsSkuName: skuGoodsInfo.sku_name, // 商品规格名称
          goodsSkuId: skuGoodsInfo.goods_sku_id, // 商品规格属性id
          goodsStock: skuGoodsInfo.amount // 商品库存
        }
        this.setData({
          skuGoodsInfo: goodsInfoObj
        })
      }
    },
    // 确定
    onSubmit () {
      const { goodsInfo: { goodsId, goodsName, skuType }, skuList, type } = this.properties
      const { skuGoodsInfo: { goodsImg, goodsSkuId }, skuGoodsStepperNum, skuLevel } = this.data
      let skuAttrKey = skuLevel[skuList.length - 1]
      if (skuType === 2 && !skuAttrKey) {
        utils.msg('请选择完整的商品规格')
        return
      }
      this.triggerEvent('sku', {
        type: type,
        goodsThumbnailUrl: goodsImg,
        goodsTitle: goodsName,
        skuId: goodsSkuId,
        spuId: goodsId,
        skuAmount: skuGoodsStepperNum
      }, {})
    }
  }
})
